<div class="container" id="manage-resource-page">
    <ul class="nav nav-tabs resources-nav">
        <li class="active files-nav"><a href="#files" data-toggle="tab">Files</a></li>
        <li class="venues-nav"><a href="#venue" data-toggle="tab">Venues</a></li>
        <li class="event-types-nav"><a href="#event-type" data-toggle="tab">Event Types</a></li>
        <li class="general-checklist-nav"><a href="#general-checklist" data-toggle="tab">General Checklist</a></li>
    </ul>
    <div class="tab-content resource-container">
        <!--Files-->
        <div class="tab-pane active" id="files">
            <div class="container file-filter">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#upload-file-popup" class="btn btn-primary btn-upload-files" data-toggle="modal"
                                title="Delete File/s"><span class="glyphicon glyphicon-upload"></span> Upload File </a>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-default btn-delete-files hide-element" data-toggle="modal" 
                                data-target="#delete-file-popup" title="Delete File/s"><span class="glyphicon glyphicon-trash"></span> Delete
                        </button>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="files-table" class="table table-bordered files-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-files"/></th>  
                            <th>Filename</th>  
                            <th style="width: 20%;">File Type</th>
                            <th style="width: 20%;">Date Uploaded</th>
                            <th style="width: 1%;"></th>
                        </tr>  
                    </thead>  
                    <tbody>
                        <?php if($files===FALSE) {?>
                        <?php }else{ ?>
                            <?php foreach($files as $item) { ?>
                            <tr>  
                                <td><input type="checkbox" class="item-file-checkbox" value="<?php echo $item['file_id']?>"/></td>  
                                <td><?php echo $item['file_name']?></td>  
                                <td><?php $type = ($item['file_type'] == '0' ? 'Document' : 'Report'); echo $type;?></td>
                                <td><?php echo $item['date_uploaded']?></td>
                                <td><a href="<?php echo site_url().$item['file_path']?>" class="btn btn-primary btn-xs" role="button" target="_blank" title="Download"><span class="glyphicon glyphicon-download"></span></a></td>
                            </tr>
                            <?php } ?>
                        <?php } ?>
                    </tbody>  
                </table>
            </div>
            <!--Upload File Modal-->
            <div class="modal fade" id="upload-file-popup" tabindex="-1" role="dialog" aria-labelledby="upload-file" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="upload-file">Upload File</h4>
                        </div>
                        <div class="modal-body">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label for="filename" class="col-sm-2 control-label">Filename</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control required" name="filename" id="filename">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="file-type" class="col-sm-2 control-label">File Type</label>
                                    <div class="col-sm-10">
                                        <select class="form-control select-file-type" name="file_type">
                                            <option value="0">Documents</option>
                                            <option value="1">Reports</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-2 control-label">File</label>
                                    <div class="col-sm-10">
                                        <input type="file" class="form-control required" name="userfile" id="userfile">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-upload">Upload</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Delete File Modal-->
            <div class="modal fade" id="delete-file-popup" tabindex="-1" role="dialog" aria-labelledby="delete-file" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-file">Delete File/s</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
        <!--Venues-->
        <div class="tab-pane" id="venue">
            <div class="container venue-filter">
                <div class="row">
                    <div class="col-md-8">
                        <button class="btn btn-primary btn-new-venue" data-toggle="modal"
                                data-target="#new-venue-popup" title="New Venue"><span class="glyphicon glyphicon-plus"></span> New Venue
                        </button>
                    </div>
                    <div class="col-md-3">
                        <form class="form-inline" role="form">
                             <div class="input-group">
                                <input type="text" class="form-control" name="search_file" placeholder="Search Venue...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <button class="btn btn-default btn-delete-venues hide-element" data-toggle="modal" 
                data-target="#delete-venue-popup" title="Delete File/s"><span class="glyphicon glyphicon-remove"></span> Delete
            </button>
            <div class="table-responsive">
                <table class="table table-bordered venues-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-venues"/></th>  
                            <th>Venue Name</th>  
                            <th>Venue Address</th>
                            <th style="width: 1%"></th>
                        </tr>  
                    </thead>  
                    <tbody>
                    </tbody>  
                </table>
            </div>
            <!--New Venue Modal-->
            <div class="modal fade" id="new-venue-popup" tabindex="-1" role="dialog" aria-labelledby="new-venue" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="new-venue">New Venue</h4>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="action" id="n-venue-action" value="0">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label for="n-venue-name" class="col-sm-3 control-label">Venue Name</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control required" name="venue_name" id="n-venue-name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="venue-address" class="col-sm-3 control-label">Venue Address</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control required" name="venue_address" id="n-venue-address">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-save">Save</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Update Venue Modal-->
            <div class="modal fade" id="edit-venue-popup" tabindex="-1" role="dialog" aria-labelledby="edit-venue" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="edit-venue">Edit Venue</h4>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="action" id="e-venue-action" value="1">
                            <input type="hidden" name="venue_id" id="e-venue-id">
                            <div class="form-horizontal">
                                <div class="form-group">
                                    <label for="e-venue-name" class="col-sm-3 control-label">Venue Name</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control required" name="venue_name" id="e-venue-name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="e-venue-address" class="col-sm-3 control-label">Venue Address</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control required" name="venue_address" id="e-venue-address">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary btn-update">Update</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Delete Venue Modal-->
            <div class="modal fade" id="delete-venue-popup" tabindex="-1" role="dialog" aria-labelledby="delete-venue" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-venue">Delete Venue/s</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
        <!--Event Types-->
        <div class="tab-pane" id="event-type">
            <div class="container event-type-filter">
                <div class="row">
                    <div class="col-md-3">
                         <div class="form-inline new-event-type-form">
                             <div class="input-group">
                                <input type="text" class="form-control required" name="search_file" id="event-type-name" placeholder="New Event Type...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default btn-new-event-type" type="button"><span class="glyphicon glyphicon-plus"></span></button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5"></div>
                    <div class="col-md-3">
                        <form class="form-inline" role="form">
                             <div class="input-group">
                                <input type="text" class="form-control" name="search_file" placeholder="Search Event Type...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <button class="btn btn-default btn-delete-event-types hide-element" data-toggle="modal" 
                data-target="#delete-event-type-popup" title="Delete File/s"><span class="glyphicon glyphicon-remove"></span> Delete
            </button>
            <div class="table-responsive">
                <table class="table table-bordered event-types-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-event-types"/></th>  
                            <th>Type Name</th>
                        </tr>  
                    </thead>  
                    <tbody>
                    </tbody>  
                </table>
            </div>
             <!--Delete Event Type Modal-->
            <div class="modal fade" id="delete-event-type-popup" tabindex="-1" role="dialog" aria-labelledby="delete-type-popup" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-type-popup">Delete Event Type/s</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
        <!--General Checklist-->
        <div class="tab-pane" id="general-checklist">
            <div class="row" style="margin-bottom: 1em;">
                <div class="col-md-3">
                     <div class="form-inline new-category-form">
                         <div class="input-group">
                            <input type="text" class="form-control required" name="category_name" id="g-c-category-name" placeholder="New Category...">
                            <span class="input-group-btn">
                                <button class="btn btn-default btn-new-g-c-category" type="button"><span class="glyphicon glyphicon-plus"></span></button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-5"></div>
                <div class="col-md-3">
                    <div class="form-inline new-sub-cat-form" role="form">
                         <div class="input-group">
                            <input type="text" class="form-control" name="search_file" placeholder="Search Category...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-group" id="accordion">
            </div>
            <!--Delete Category Modal-->
            <div class="modal fade" id="delete-cat-popup" tabindex="-1" role="dialog" aria-labelledby="delete-cat" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-cat">Delete Category</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
            <!--Delete Sub Category Modal-->
            <div class="modal fade" id="delete-sub-cat-popup" tabindex="-1" role="dialog" aria-labelledby="delete-sub-cat" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-sub-cat">Delete Sub Category</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>
